import { defineStore } from 'pinia'
import { Notification } from '@arco-design/web-vue'
import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface'
import type { RouteRecordNormalized } from 'vue-router'
import defaultSettings from '@/config/settings.json'
import { getMenuList, MenuData } from '@/api/user'
import { AppState } from './types'

const useAppStore = defineStore('app', {
	state: (): AppState => ({ ...defaultSettings }),

	getters: {
		appCurrentSetting(state: AppState): AppState {
			return { ...state }
		},
		appDevice(state: AppState) {
			return state.device
		},
		appAsyncMenus(state: AppState): RouteRecordNormalized[] {
			return state.serverMenu as unknown as RouteRecordNormalized[]
		},
	},

	actions: {
		// Update app settings
		updateSettings(partial: Partial<AppState>) {
			// @ts-ignore-next-line
			this.$patch(partial)
		},

		// Change theme color
		toggleTheme(dark: boolean) {
			if (dark) {
				this.theme = 'dark'
				document.body.setAttribute('arco-theme', 'dark')
			} else {
				this.theme = 'light'
				document.body.removeAttribute('arco-theme')
			}
		},
		toggleDevice(device: string) {
			this.device = device
		},
		toggleMenu(value: boolean) {
			this.hideMenu = value
		},
		async fetchServerMenuConfig() {
			let notifyInstance: NotificationReturn | null = null
			try {
				notifyInstance = Notification.info({
					id: 'menuNotice', // Keep the instance id the same
					content: 'loading',
					closable: true,
				})
				const { data } = await getMenuList()
				data.push({
					path: '/dashboard',
					name: 'dashboard',
					meta: {
						locale: 'menu.server.dashboard',
						requiresAuth: true,
						icon: 'icon-dashboard',
						order: 1,
					},
					children: [
						{
							path: 'workplace',
							name: 'Workplace',
							meta: {
								locale: 'menu.server.workplace',
								requiresAuth: true,
								icon: '',
								order: 0
							},
						},
						{
							path: 'https://arco.design',
							name: 'arcoWebsite',
							meta: {
								locale: 'menu.arcoWebsite',
								requiresAuth: true,
							},
						}
					]
				})
				data.forEach(item => {
					// if (item.component === 'DEFAULT_LAYOUT') {
					// 	item.component = DEFAULT_LAYOUT
					// }
					item.component = ''
					// const { children } = item
					// this.loadComponents(children || [])
				})
				this.serverMenu = data
				notifyInstance = Notification.success({
					id: 'menuNotice',
					content: 'success',
					closable: true,
				})
			} catch (error) {
				// eslint-disable-next-line @typescript-eslint/no-unused-vars
				notifyInstance = Notification.error({
					id: 'menuNotice',
					content: 'error',
					closable: true,
				})
			}
		},
		async loadComponents(children: MenuData[]) {
			const modules = import.meta.glob('@/views/*/*/*.vue')

			// eslint-disable-next-line no-restricted-syntax,no-unreachable-loop
			for (const child of children) {
				const module = modules['/src/views/' + child.component + '.vue']
				// 动态导入组件
				if (module !== undefined) {
					child.component = module
				}
			}
		},
		clearServerMenu() {
			this.serverMenu = []
		},
	},
})

export default useAppStore
